<template>
  <div class="checkbox">
    <i class="fa fa-circle-o check-form" aria-hidden="true" v-if="!value" @touchstart="toggleStatus"></i>
    <i class="fa fa-check-circle-o check-form-active" aria-hidden="true" @touchstart="toggleStatus" v-else></i>
  </div>
</template>

<script>
  export default {
    name: 'Checkbox',
    props: {
      value: {
        type: Boolean
      }
    },
    methods: {
      toggleStatus () {
        this.value = !this.value
        this.$emit('input', this.value)
      }
    }
  }
</script>

<style lang="scss" scoped="">
  @import "../assets/css/variable";
  @import "../assets/css/px2rem";

  .checkbox{
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .check-form{
    color: #ccc;
  }

  .check-form-active{
    color: $theme-color;
  }

</style>
